<template>
  <div
    class="type-item"
    :class="{
      'type-item--active': active,
    }" :style="data.show ? '' : 'display: none'"
  >
    <div class="type-item__name">{{ data.label }}</div>
    <div class="data">
      <div class="data-item" v-for="num in data.count">
        <div class="data-item__icon"></div>
        <div class="data-item__num">
          {{ num }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const type = defineModel({ type: Number })
const props = defineProps({
  data: Object,
  active: Boolean,
})
</script>
<style lang="scss" scoped>
.type-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #778090;
}

.type-item__name {
  margin-bottom: 3px;
  font-weight: 900;
}

.data {
  display: flex;
}

.data-item {
  margin-right: 8px;
  display: flex;
  align-items: center;
  &:last-child {
    margin-right: 0;
  }

  .data-item__icon {
    margin-right: 2px;
    width: 8px;
    height: 8px;
    background-size: 100% auto;
    background-position: 0 center;
    background-repeat: no-repeat;
  }

  &:nth-child(1) {
    .data-item__icon {
      background-image: url('@/assets/home/round.png');
    }
  }

  &:nth-child(2) {
    .data-item__icon {
      background-image: url('@/assets/home/hook.png');
    }
  }

  &:nth-child(3) {
    .data-item__icon {
      background-image: url('@/assets/home/fork.png');
    }
  }
}

.type-item--active {
  color: #252a30;
  .type-item__name {
    color: var(--primary);
  }

  .data-item {
    &:nth-child(1) {
      .data-item__icon {
        background-image: url('@/assets/home/active/round.png');
      }
    }

    &:nth-child(2) {
      .data-item__icon {
        background-image: url('@/assets/home/active/hook.png');
      }
    }

    &:nth-child(3) {
      .data-item__icon {
        background-image: url('@/assets/home/active/fork.png');
      }
    }
  }
}
</style>
